import i18n from "@/locales";
import { IMenu } from "@/type/Menu";
/**
 * 下载图片
 * @param {*} imgsrc 图片地址
 * @param {*} name 图片名字
 */
export const createImage = (imgsrc: string, name: string) => {
  //下载图片地址和图片名
  let image = new Image();
  // 解决跨域 Canvas 污染问题
  image.setAttribute("crossOrigin", "anonymous");
  image.onload = function () {
    let canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    let context = canvas.getContext("2d");
    context!.drawImage(image, 0, 0, image.width, image.height);
    let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据

    let a = document.createElement("a"); // 生成一个a元素
    let event = new MouseEvent("click"); // 创建一个单击事件
    a.download = name || "photo"; // 设置图片名称
    a.href = url; // 将生成的URL设置为a.href属性
    a.dispatchEvent(event); // 触发a的单击事件
  };
  image.src = imgsrc;
}
/**
 * 全屏函数
 * @param ele body或者div元素
 */
export const fullScreen = (ele: any) => {
  if (ele.requestFullscreen) {
    ele.requestFullscreen();
  } else if (ele.mozRequestFullScreen) {
    ele.mozRequestFullScreen();
  } else if (ele.webkitRequestFullscreen) {
    ele.webkitRequestFullscreen();
  } else if (ele.msRequestFullscreen) {
    ele.msRequestFullscreen();
  }
}
/**
 * 退出全屏
 */
export const exitFullscreen = () => {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.exitFullscreen) {
    document.exitFullscreen();
  }
}

/**
 * 文字水印
 * @param options 配置选项
 * @param isBody true为绑定在body下面的全局水印
 * @returns 
 */
export const watermark = (options: any, isBody: boolean): string | undefined => {
  const {
    container = document.body, // 容器
    width = '240', // canvas元素宽
    height = '100', // canvas元素高
    textAlign = 'left', // 文字对齐
    textBaseline = 'bottom', // 基准线
    font = '16px Microsoft Yahei', // 字体大小及样式
    fillStyle = '#000', // 自定义水印的颜色
    content = 'Vue Admin Perfect', // 水印内容
    globalAlpha = 0.3, // 设置图形和图像透明度的值
    rotate = 16, // 文字旋转角度
    zIndex = 1000, // 元素堆叠顺序
  } = options;

  const canvas = document.createElement('canvas');
  canvas.setAttribute('width', width);
  canvas.setAttribute('height', height);
  const ctx = canvas.getContext('2d'); // 获取 canvas2d 上下文
  if (ctx) {
    ctx.globalAlpha = globalAlpha;
    ctx.textAlign = textAlign;
    ctx.textBaseline = textBaseline;
    ctx.font = font;
    ctx.fillStyle = fillStyle;
    ctx.rotate((Math.PI * rotate) / 180);
    ctx.fillText(content, 50, 50);
  }

  const base64Url = canvas.toDataURL(); // 返回一个包含图片展示的 data URI
  if (isBody) {
    const _wm = document.querySelector('.__wm');
    const dom = _wm || document.createElement('div');
    const styleStr = `
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:${zIndex};
    pointer-events:none;
    background-repeat:repeat;
    background-image:url('${base64Url}')`;
    dom.classList.add('__wm') // 为元素添加“__wm”类名
    container.style.position = 'relative';
    dom.setAttribute('style', styleStr);
    container.appendChild(dom) // 添加元素
    return;
  }
  document.querySelector('.__wm')?.remove();
  return base64Url;
}

export const translate = (param: string) => {
  const hasKey = i18n.global.te(param);
  if (hasKey) {
    return i18n.global.t(param)
  }
  const resArr = param.split('.');
  return resArr.length > 1 ? resArr[1] : resArr[0];
}

/**
 * 根据关键词找到节点
 * @param key 关键词
 */
export const getLeaf = (list: IMenu[], key: string): IMenu[] => {
  let result: IMenu[] = [];

  let traverse = (ourKey: string, data: IMenu[]) => {
    if (!data.length) {
      return;
    }
    for (let item of data) {
      if (item.url.includes(key) || item.title.includes(key)) {
        result.push(item);
      }
      if (item.children) {
        traverse(ourKey, item.children);
      }
    }
  }
  traverse(key, list);
  return result;
}

/**
 * 根据路径找到节点
 * @param key 关键词
 */
export const getLeafByPath = (list: IMenu[], key: string): IMenu | null => {
  let result = null;

  let traverse = (ourKey: string, data: IMenu[]) => {
    if (!data.length) {
      return;
    }
    for (let item of data) {
      if (item.url === key) {
        result = item;
        return;
      }
      if (item.children) {
        traverse(ourKey, item.children);
      }
    }
  }
  traverse(key, list);
  return result;
}
/**
 * 获取目录路径
 * 根据节点找到路径
 * @param leaf 叶子结点
 */
export const getPath = (list: IMenu[], leaf: IMenu) => {
  let result: IMenu[] = [];

  let traverse = (data: IMenu[]) => {
    if (!data.length) {
      return;
    }
    for (let item of data) {
      let len = item.key.length;
      if (leaf.key.slice(0, len) === item.key) {
        result.push(item);
      }
      if (item.children) {
        traverse(item.children);
      }
    }
  }
  traverse(list);
  return result;
}